<template>
  <div v-if="history">
    <vue-good-table
      :columns="columns"
      :rows="history"
      :pagination-options="{
        enabled: true,
        mode: 'records',
        perPage: 5,
        position: 'bottom',
        perPageDropdown: [5, 10, 25, 50],
        dropdownAllowAll: false,
        setCurrentPage: 1,
        nextLabel: 'next',
        prevLabel: 'prev',
        rowsPerPageLabel: 'Rows per page',
        ofLabel: 'of',
        pageLabel: 'page',
        allLabel: 'All'
      }"
      :search-options="{ enabled: true }"
      :sort-options="{
        enabled: true,
        initialSortBy: { field: 'createdOnOrStartOn', type: 'desc' }
      }"
    >
      <template slot="table-row" slot-scope="props">
        <span
          v-if="
            props.column.field == 'interactionSubject' &&
              props.row.interactionId
          "
        >
          <router-link
            :to="{
              name: 'Entry',
              params: {
                id: props.row.contactId,
                entry_id: props.row.interactionId
              }
            }"
            >{{ props.row.interactionSubject }} 🔗</router-link
          >
        </span>
        <span
          v-else-if="
            props.column.field == 'appointmentId' && props.row.appointmentId
          "
        >
          {{ props.row.appointmentId }}
        </span>
      </template>
    </vue-good-table>
  </div>
  <div v-else>No history found.</div>
</template>

<script>
import "vue-good-table/dist/vue-good-table.css";
import { VueGoodTable } from "vue-good-table";

export default {
  name: "History",
  components: {
    VueGoodTable
  },
  props: ["history"],
  data() {
    return {
      columns: [
        {
          label: "Date",
          field: "createdOnOrStartOn",
          type: "date",
          dateInputFormat: "yyyy-MM-dd HH:mm:ss",
          dateOutputFormat: "MMM do yyyy, HH:mm aaa"
        },
        {
          label: "Subject",
          field: "interactionSubject"
        },
        {
          label: "AssignedTo",
          field: "interactionAssignedToName"
        },
        {
          label: "Via",
          field: "interactionMedium"
        },
        {
          label: "State",
          field: "interactionState"
        },
        {
          label: "Meta",
          field: "appointmentId"
        }
      ]
    };
  }
};
</script>
